<template>
    <div>
        <Menu mode="horizontal" :theme="theme1" active-name="1">
            <MenuItem name="1">
                <Icon type="ios-paper"></Icon>
                内容管理
            </MenuItem>
            <MenuItem name="2">
                <Icon type="ios-people"></Icon>
                用户管理
            </MenuItem>
            <Submenu name="3">
                <template slot="title">
                    <Icon type="stats-bars"></Icon>
                    功能展示
                </template>
                <MenuGroup title="使用">
                    <MenuItem name="3-1">                    
                        <router-link to="/">首页</router-link>
                    </MenuItem>
                    <MenuItem name="3-2">
                        <router-link to="/table">分页</router-link>
                    </MenuItem>
                    <MenuItem name="3-3">
                        <router-link to="/tabs">标签页</router-link>
                    </MenuItem>            
                </MenuGroup>
                <MenuGroup title="留存">
                    <MenuItem name="3-4">用户留存</MenuItem>
                    <MenuItem name="3-5">流失用户</MenuItem>
                </MenuGroup>
                <MenuItem name="3-6">不分组</MenuItem>
            </Submenu>
            <MenuItem name="4">
                <Icon type="settings"></Icon>
                综合设置
            </MenuItem>
        </Menu>
        <br>
        <p>Change theme</p>
        <RadioGroup v-model="theme1">
            <Radio label="light"></Radio>
            <Radio label="dark"></Radio>
            <Radio label="primary"></Radio>
        </RadioGroup>
    </div>
    
</template>

<script>
    export default {
        name: 'navbar',
        data () {
            return {
                theme1: 'light'
            }
        }
    }
</script>